<template>
    <div class="main-container">
      <div class="top">
        <div class="logo">新零售电商平台</div>
      </div>
      <div class="main">
        <div class="menu-left">
          <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            router
            >
            <el-submenu index="1">
              <template slot="title">
                <span>店铺管理</span>
              </template>
              <el-menu-item index="2-1" route='/shoplist'>店铺列表</el-menu-item>
              <el-menu-item index="2-2" route="/goodslist">商品列表</el-menu-item>
              <el-menu-item index="2-3" route="/shopcheck">开店审核</el-menu-item>
            </el-submenu>
          </el-menu>
        </div>
        <div class="content">
          <router-view />
        </div>
      </div>
    </div>
</template>
<script>
export default {
    name: 'Main',
    data() {
        return {
        }
    },
    props: {},
    components: {},
    created() {
    },
    mounted() {
    },
    computed: {},
    methods: {
    }
}
</script>
<style scoped lang="less">
.main-container {
  min-width: 1920px;
  .top {
    width: 100%;
    height: 75px;
    border: 1px solid #797979;
    .logo {
      width: 196px;
      height: 100%;
      background-color: #4C7DFF;
      border: 1px solid #797979;
      border-bottom: none;
      box-sizing: border-box;
      color: #fff;
      font-size: 20px;
      font-weight: 600;
      font-family: '黑体';
      text-align: center;
      line-height: 75px;
    }
  }
  .main {
    width: 100%;
    min-height: calc(100vh - 75px);
    display: flex;
    .menu-left {
      width: 196px;
      border: 1px solid #797979;
      border-top: none;
    }
    .content {
      flex: 1;
      margin: 10px;
      border: 1px solid #797979;
    }
  }
}
</style>